<template>
  <el-card
    class="box-card"
    style="background-color: #fff; margin-left: 1%; width: 98%"
  >
    <p style="border-bottom: 1px solid #ebeef5; padding-bottom: 20px">
      添加账号
    </p>
    <div style="width: 300px; margin-left: 94px">
      <p style="display: flex; margin-top: 20px">
        <span style="width: 69px; line-height: 38px; text-align: right"
          >账号</span
        ><el-input
          style="margin-left: 20px"
          placeholder="请输入内容"
          v-model="acc"
          clearable
        >
        </el-input>
      </p>
      <p style="display: flex; margin-top: 20px">
        <span style="width: 69px; line-height: 38px; text-align: right"
          >密码</span
        ><el-input
          style="margin-left: 20px"
          placeholder="请输入内容"
          v-model="pwd"
          clearable
        >
        </el-input>
      </p>
      <p style="display: flex; margin-top: 20px">
        <span style="width: 69px; line-height: 38px">用户组</span>

        <el-select
          style="width: 228px; margin-left: 4px"
          v-model="usergroup"
          slot="prepend"
          placeholder="请选择用户组"
        >
          <el-option label="普通管理员" value="普通管理员"></el-option>
          <el-option label="超级管理员" value="超级管理员"></el-option>
        </el-select>
      </p>
      <div style="margin-top: 20px; margin-left: 78px">
        <el-button @click="clickAdd" type="primary">添加</el-button>
        <el-button>重置</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
//@/标是直接找到src的根目录
import { addusers } from "@/apis/users";
export default {
  data() {
    return {
      flag: false, //节流标杆
      acc: "",
      pwd: "",
      usergroup: "",
    };
  },
  methods: {
    clickAdd() {
      if (this.flag) {
        console.log("您的操作过于频繁,请稍后再试");
        return; //如果已经发送了请求
      }

      addusers({
        account: this.acc,
        password: this.pwd,
        userGroup: this.usergroup,
      }).then((res) => {
        console.log(res);
        if (res.data.code === 0) {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "success",
          });
        } else {
          this.$message({
            showClose: true,
            message: res.data.msg,
            type: "error",
          });
        }
      });

      this.flag = true; //已经发送过请求
      setTimeout(() => {
        this.flag = false; ////三秒之后，又可以发送请求了
      }, 3000); // 节流次函数，每3秒只发送一次
    },
  },
};
</script>

<style lang="less" scoped>
.title {
  height: 48px;
  line-height: 48px;
  text-indent: 10px;
  border-bottom: 1px solid #ebeef5;
}
</style>